<template>
  <van-field
    v-model="item.value"
    :name="item.itemTitle"
    :required="item.isRequired === 'Y'"
    :rules="[
      { required: item.isRequired === 'Y', message: '请选择' + item.itemTitle },
    ]"
    is-link
    label-width="33rem"
    placeholder="点击选择"
    readonly
    @click="openPop"
  >
    <template #label>
      <span>{{ titleText(options, item) }}</span>
      <p v-if="options.showDesc" class="desc f12 ml30">
        {{ options.description }}
      </p>
    </template>
  </van-field>
  <van-popup v-model:show="showPicker" position="bottom">
    <TimePicker
      v-model="startTime"
      :columns-type="columnsType"
      @cancel="showPicker = false"
      @confirm="onChange"
    >
    </TimePicker>
  </van-popup>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import { TimePicker } from "vant";
import { ref, } from "vue";

//defineOptions({ name: "H5Time" });

const { item, type } = defineProps(["item", "type"]);
const emits = defineEmits(["change"]);

const showPicker = ref(false);
const startTime = ref([]);
const { options } = JSON.parse(item.vformJson);
const columnsType = ["hour", "minute", "second"];
// 传递值改变后
const onChange = (time) => {
  item.value = startTime.value.join(":");
  item.list = [startTime.value];
  emits("change", item);
  showPicker.value = false;
};
// 点击去选择
const openPop = () => {
  showPicker.value = type !== "view";
};
</script>